<template>
  <el-dialog
    :visible.sync="showUnbinding"
    :close-on-click-modal="modalDialog"
    top="20vh !important"
    :close-on-press-escape="modalDialog"
    width="900px"
  >
    <div slot="title">
      <span>{{ $t('message.jieban') }}</span>
      <span class="primaryColor ml10 underline pointer" @click="releRecord">{{ $t('message.gljl') }}</span>
    </div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.shxx') }}：</span>
        <span class="value">{{ param.braceletId }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.pjmc') }}：</span>
        <span class="value">{{ param.name || param.billName || '' }}</span>
      </div>
      <div>
        <span class="key">{{ param.userType === '0' ?$t('message.hyxm') : $t('message.skxm') }}：</span>
        <span class="value">{{ param.userName }}</span>
      </div>
      <div>
        <span class="key">{{ param.userType === '0' ? $t('message.hysjh'): $t('message.sksjh2') }}：</span>
        <span class="value">{{ param.phone || '-' }}</span>
      </div>
      <div v-if="param.number">
        <span class="key">{{ $t('message.hykh') }}：</span>
        <span class="value">{{ param.number || '-' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.shyj') }}：</span>
        <span class="value">{{ param.realDeposit }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.yjzffs') }}：</span>
        <span class="value">{{ param.payMethod }}</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="gjCnt">
        <span>{{ $t('message.styj') }}：</span>
        <el-input
          v-model="modPValue"
          maxlength="10"
          clearable
          oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
          :placeholder="$t('message.qsr')"
        />
      </div>
	  <div class="gjCnt2">
	  		<el-input
	  		  v-model="changeBraceletId"
	  		  :placeholder="$t('message.qsrghshbh')"
	  		/>
	  </div>
    <!--  <el-button @click="showUnbinding = false">{{ $t('message.qx') }}</el-button> -->
	   <el-button  type="primary" :loading="subLoading"  @click="onSubmitChange" >{{ $t('message.ghsh') }}</el-button>
      <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.jcbd') }}</el-button>
    </div>
    <RefundTem v-if="isPrint" ref="RefundTemRef" />
  </el-dialog>
</template>

<script>
import { partialRefundBraceletOrder, printOrder,changeBracelet } from '@/api'
import store from '@/store'
import RefundTem from '@/components/printTem/refund.vue'
export default {
  components: {
    RefundTem
  },
  data() {
    return {
      isPrint: false,
      modalDialog: store.getters.dialog,
      editPd: false,
      showUnbinding: false,
      subLoading: false,
      param: {},
      modPValue: '',
	  changeBraceletId:''
    }
  },
  methods: {
    show(e) {
      this.showUnbinding = true
      this.param = e || {}
      this.modPValue = e.realDeposit || '0'
    },
    releRecord() {
      this.showUnbinding = false
      this.$router.replace(`/vipList/associationList`)
    },
	onSubmitChange(){
		var that = this;
		this.subLoading = true;
		const param = this.param;
		changeBracelet({ param: { id: param.id, newBraceletId: that.changeBraceletId }}).then(res => {
		   that.subLoading = false;
		   this.$message.success(this.$t('message.ghcg2'))
		   if (res.errorCode !== '000000') return;
		   setTimeout(() => {
		     that.showUnbinding = false;
			 that.changeBraceletId='';
		   }, 1500)
		}, () => {
		  that.subLoading = false
		})
	},
    printT(workId) {
      this.isPrint = true
      printOrder({
        param: {
          contentMap: {},
          venueId: sessionStorage.getItem('venueId'),
          workId,
          templateCode: 'BRACELET_REFUND_TPML'
        }
      })
        .then(res => {
          if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
            res.record.dataList.forEach(item => {
              this.$refs.RefundTemRef.obj = { ...item }
              setTimeout(() => {
                this.$refs.RefundTemRef.print()
              }, 300)
              setTimeout(() => {
                this.isPrint = false
              }, 500)
            })
          } else {
            this.isPrint = false
          }
        })
        .catch(() => {
          this.isPrint = false
        })
    },
    onSubmit() {
      const that = this
      const param = that.param
      if (!this.modPValue || (this.modPValue === '0' && Number(param.realDeposit) > 0)) {
        return this.$message.info(this.$t('message.qsr') + this.$t('message.styj'))
      } else {
        if (this.modPValue > param.realDeposit) {
          return this.$message.info(this.$t('message.styjbndyshyj'))
        }
      }
      this.subLoading = true
      partialRefundBraceletOrder({ param: { id: param.id, money: Number(this.modPValue) }}).then(res => {
        this.subLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.$t('message.jbcg'))
        this.showUnbinding = false
        if (res.record) {
          this.printT(res.record)
        }
        this.$emit('success')
      }, () => {
        this.subLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.df_ac {
  flex-wrap: wrap;
  border-bottom: 1px solid #DFE2E8;
  div {
    margin-bottom: 20px;
    width: 100%;
    .key {
  color: #666666;
  display: inline-block;
}
.value {
  color: #222;
}
  }
}
::v-deep .el-dialog__body {
  padding-bottom: 10px !important;
}
.gjCnt {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      line-height: 14px;
      float: left;
      span {
        width: 7em;
  text-align: right;
      }

      .el-input {
        width: 150px;
        margin: 0 5px;
      }
    }
.gjCnt2 {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      line-height: 14px;
      float: left;
      span {
        width: 7em;
  text-align: right;
      }

      .el-input {
        width: 200px;
        margin: 0 5px;
      }
    }
</style>
